<template>
    <div class='news'>
        <div class="newsone">
             <van-nav-bar
            title="我的消息"
            left-text="返回" 
            left-arrow
            @click-left="onClickLeft"
            />
            
            <van-search
            v-model="value"
            placeholder="搜索用户"
            input-align="center"
            @click="search()"
            />

        <div class="navsome">
            <div class="some">

                <div class="fansone">
                    <div class="fanscolor">
                        <van-icon name="friends" color="white" />
                    <p>粉丝</p>
                    </div>
                </div>

                <div class="fansone">
                    <div class="fanscolor fanscolor1">
                        <van-icon name="chat"  color="white"/>
                    <p>评论</p>
                    </div>
                </div>

                <div class="fansone">
                    <div class="fanscolor fancolor2">
                        <van-icon name="eye" color="white"/>
                    <p>@我</p>
                    </div>
                    
                </div>
                <div class="fansone">
                    <div class="fanscolor fanscolor3">
                        <van-icon name="bell" color="white"/>
                        <p>通知</p>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <div class="private">
            <p>私信对话</p>
            <van-skeleton title avatar :row="1" />
            <van-skeleton title avatar :row="1" />
            <van-skeleton title avatar :row="1" />
            <van-skeleton title avatar :row="1" />
            <van-skeleton title avatar :row="1" />
            <van-skeleton title avatar :row="1" />
        </div>
            

    </div>
</template>

<script>
import Vue from 'vue';
import { Search,Icon,Skeleton} from 'vant';
Vue.use(Skeleton);
Vue.use(Icon);
Vue.use(Search);
export default {
    
    data() {
        
        return {
            value: '',
        };
    },
    computed: {
       
    },
    watch: {},
    
    methods: {
         onClickLeft() {
            this.$router.go(-1)
        },
        search(){
            
        }
    },
    created() {
        
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
.some{
    display: flex;
    justify-content: space-evenly;
}
    .fanscolor{
        background-color: rgba(255, 0, 0, 0.685);
        width: 50px;
        height: 50px;
        border-radius: 50px;
        text-align: center;
        line-height: 50px;
    }
    .fanscolor1{
        background-color: rgba(53, 75, 172, 0.541);
    }
    .fanscolor2{
        background-color: rgba(214, 54, 14, 0.925);
    }
    .fanscolor3{
        background-color: rgba(187, 177, 32, 0.692);
    }
    .private{
      width: 92%;
    height: 30px;
    padding-left: 14px;
    margin: 0 auto;
    }
    .some{
    display: flex;
    justify-content: space-evenly;
    height: 100px;
    }
    
</style>